<!DOCTYPE html>
<html lang="en">
<head>
<title>#(option.label)管理页</title>
#@common()
<style>
body { background: #F8F8F8; }
.search{padding-top: 10px; }
.ui-jqgrid tr.jqgrow, .ui-jqgrid tr.ui-row-ltr, .ui-jqgrid tr.ui-row-rtl{font-size: 14px; height: 28px; line-height: 28px; padding-left: 5px; }
.control-label{text-align: right;}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{ padding: 0px};
</style>
</head>
<body class="no-skin">
	<div class="breadcrumbs" id="breadcrumbs">
		<ul class="breadcrumb">
			<li>
				<i class="ace-icon #if(option.iconCols?? && option.iconCols.trim().matches('^glyphicon.*')) glyphicon #else fa #end home-icon #(option.iconCols??'')"></i> 
				<a href="javascript:;" style="line-height: 24px;">#(option.label)</a>
			</li>
		</ul>
	</div>
	<!-- 搜索部分的功能区域 -->
	<div class="form-group row search">
		#if(paras?? && paras.size() > 0)
		#for(para : paras)
		<div class="col-lg-2 col-md-3 col-sm-3" style="padding-right: 12px;">
			<label class="col-lg-5 col-md-5 col-sm-5 control-label no-padding-right" style="line-height: 34px;"> #(para.label)：</label>
			<div class="col-lg-7 col-md-7 col-sm-7">
				<input id="#(para.param)" type="text" autocomplete="off" placeholder="请输入#(para.label)" class="col-sm-12 form-control"/>
			</div>
		</div>
		#end
		<button class="btn btn-white btn-info" onclick="search()">
			<i class="ace-icon fa fa-search"></i>查询
		</button>
		<hr style="width: 99%; margin: auto; border-bottom: 1px solid #E1E1E1;"/>
		#end
	</div>
	<!-- 功能按钮部分的具体功能 -->
	<div class="form-group row btnGroup" style="margin-bottom: 0px;">
		<div class="btn-group pull-right" style="padding-left: 12px; padding-right: 24px;">
			#for(btn : btns)
			<button class="btn btn-sm btn-white btn-info" onclick="#(btn.url)()">
				#if(btn.iconCols??)
				<i class="ace-icon #if(btn.iconCols.trim().matches('^glyphicon.*')) glyphicon #else fa #end #(btn.iconCols)"></i>
				#end
				#(btn.label)
			</button>
			#end
		</div>
	</div>
	<!-- 这里实现的是表格的具体功能 -->
	<div class="page-body">
		<table id="grid-table"></table>
		<div id="grid-pager"></div>
	</div>

<script type="text/javascript">
var jqGrid;
jQuery(function($) {
	var option = {
		height : $(window).height() - $('.breadcrumbs').height() - $('.search').height() - 135 - $('.btnGroup').height(),
		width : $(".page-body").width(),
		pager : "#grid-pager",
	};
	option.url = '#(table.url)';
	#if(!table.shrinkToFit)
	option.autowidth = false;
	option.shrinkToFit = false;
	#end
	option.colNames = [];
	option.colModel = [];
	#for(col : cols)
	option.colNames.push('#(col.label)');
	option.colModel.push({
		"name" : '#(col.param)', 
		#if(col.formatter??) 'formatter' : #(col.url) , #end 
		#if(col.width??) 'width' : #(col.width?? 0), #end 
		#if(col.key??) 'key': #(col.key) , #end
		#if(col.hidden??) 'hidden' : #(col.hidden) , #end
		})
	#end
	//组装jqgrid
	jqGrid = new JqGrid("#grid-table", option);
});

// 加载按钮调用的方法
#for(btn : btns)#(btn.formatter)#end

// 加载搜索功能实现
#if(paras?? && paras.size() > 0)
var search = function(){
	var data = {
		#for(para : paras)
		#(para.param) : $('##(para.param)').val(),
		#end
	}
	jqGrid.search(data);
}
#end

// 加载表格格式化信息
#for(col : cols)#if(col.formatter??)#(col.formatter)#end#end

// 当页面发生变动时，重置表格的大小
$(window).resize(function(){
	jqGrid.setWidth();
	jqGrid.setHeight();
})
</script>
</body>
</html>